import "../css/layout.css"
import { Outlet, useNavigate, useLocation, Link } from "react-router-dom";
import { Row, Col, Menu, Image, Dropdown, Space, Spin, message, Breadcrumb } from "antd";
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import img from "../assets/logo.png"
import tx from "../assets/tx.jpg"
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import { removeToken } from "../utils/auth";
import React from "react";
import routes from '../router/routes';
import sy from "../assets/首页.png"
import dd from "../assets/订单1.png"
import mf from "../assets/魔方.png"
import hz from "../assets/盒子3-01.png"
import cd from "../assets/菜单管理.png"
import jia from "../assets/加号.png"
import gys from "../assets/供应商.png"
import zl from "../assets/四方格.png"
import sh from "../assets/商户.png"
import hd from "../assets/活动.png"
import gly from "../assets/管理员.png"
import cz from "../assets/操作日志.png"
import cw from "../assets/错误日志.png"

import { HomeOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
const Layout = () => {
    const [mode] = useState('inline');
    const [theme] = useState('light');
    const [path, setPath] = useState('主页');
    const [spinning, setSpinning] = React.useState(false);//加载中
    const location = useLocation();
    const [breadcrumbItems, setBreadcrumbItems] = useState([]);
    useEffect(() => {
        const buildBreadcrumbs = (routes, currentPath) => {
            const items = [];
            for (const route of routes) {
                if (currentPath.startsWith(route.path)) {
                    const pathKey = route.path === '/' ? route.path : route.path.slice(0, -1);
                    items.push({
                        key: pathKey,
                        name: route.name,
                        url: route.path,
                    });
                    if (currentPath !== route.path && route.children) {
                        let nextPath = currentPath.slice(route.path.length);
                        if (nextPath.startsWith('/')) {
                            nextPath = nextPath.slice(1);
                        }
                        items.push(...buildBreadcrumbs(route.children, nextPath));
                        // buildBreadcrumbs(route.children, nextPath);
                    }
                }
            }
            return items
        };
        let currentPath = location.pathname;
        const breadcrumbItems = buildBreadcrumbs(routes, currentPath); // 从顶级路由开始构建面包屑
        setBreadcrumbItems(breadcrumbItems);
    }, [location, routes]); // 确保依赖项正确
    const navigate = useNavigate();
    const tc = () => {
        setSpinning(true);
        removeToken();
        setTimeout(() => {
            message.success('操作成功')
            navigate('/login');
            setSpinning(false);
        }, 1500);
    };
    const { user } = useSelector((state) => state.user)
    const items = [
        {
            key: '1',
            label: (
                <span >{user.account}</span>
            ),
            icon: <SmileOutlined />,
            disabled: true,
        },
        {
            key: '2',
            label: (
                <span >个人中心</span>
            ),
            icon: <SmileOutlined />,
        },
        {
            key: '3',
            label: (
                <>
                    <span ghost size='small' onClick={() => tc()} >
                        退出
                    </span>
                </>
            ),
            icon: <SmileOutlined />,

        },

    ];

    const [openKeys, setOpenKeys] = useState([]);
    const onOpenChange = keys => {
        // 当只有一个子菜单被展开时，收起其他展开的子菜单
        setOpenKeys(keys.length ? [keys[keys.length - 1]] : keys);
    };
    // 自定义的渲染函数，用于渲染带有图标的SubMenu标题  
    const renderSubMenuTitle = (title, dd) => (
        <span>
            <Image src={dd} width={20} style={{ paddingBottom: 5 }} />
            {title}
        </span>
    );
    const shopp = (title, hz) => (
        <span>
            <Image src={hz} width={20} style={{ paddingBottom: 5 }} />
            {title}
        </span>
    );
    const gysgl = (title, gys) => (
        <span>
            <Image src={gys} width={20} style={{ paddingBottom: 5 }} />
            {title}
        </span>
    );
    const shgl = (title, sh) => (
        <span>
            <Image src={sh} width={20} style={{ paddingBottom: 5 }} />
            {title}
        </span>
    );
    const hdgl = (title, hd) => (
        <span>
            <Image src={hd} width={20} style={{ paddingBottom: 5 }} />
            {title}
        </span>
    );
    const glygl = (title, gly) => (
        <span>
            <Image src={gly} width={20} style={{ paddingBottom: 5 }} />
            {title}
        </span>
    );

    return (
        <div>
            <div className="head">
                <Row gutter={16}>
                    <Col className="gutter-row" span={8}>
                        <div>
                            <img src={img} style={{ width: 100, lineHeight: 40 }} alt="" />
                        </div>
                    </Col>
                    <Col className="gutter-row" span={8}>
                        <div></div>
                    </Col>
                    <Col className="gutter-row" span={8}>
                        <div className="avatar">
                            <Image src={tx} width={50} style={{ lineHeight: 60, borderRadius: 50 }} />
                            <span style={{ marginLeft: 20 }}>
                                <Dropdown menu={{ items }} >
                                    <span onClick={(e) => e.preventDefault()}>
                                        <Space> {user.name}
                                            <DownOutlined />
                                        </Space>
                                    </span>
                                </Dropdown>
                            </span>
                        </div>
                    </Col>
                </Row>
            </div>
            <div className="main">
                <div className="main-left">
                    <Menu style={{ width: 200, }} mode={mode} theme={theme} openKeys={openKeys} onOpenChange={onOpenChange} >
                        <Menu.Item key="home" style={{ height: 50 }}>
                            <Link to="/" onClick={() => setPath('首页')} ><Image src={sy} width={20} style={{ paddingBottom: 5 }} />主页</Link>
                        </Menu.Item>
                        <SubMenu title={renderSubMenuTitle('订单管理', dd)}  >
                            <Menu.Item key="order">
                                <Link to="/order" onClick={() => setPath('订单管理')}><Image src={mf} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>订单主页</span></Link>
                            </Menu.Item>
                        </SubMenu>
                        <SubMenu title={shopp('商品管理', hz)}>
                            <Menu.Item>
                                <Link to="/goods" onClick={() => setPath('商品管理')}><Image src={mf} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>商品主页</span></Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/goods/type" onClick={() => setPath('类型')}><Image src={cd} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>商品类型</span></Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/goods/add" onClick={() => setPath('新增商品')}><Image src={jia} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>商品新增</span></Link>
                            </Menu.Item>
                        </SubMenu>
                        <SubMenu title={gysgl('供应商管理', gys)}>
                            <Menu.Item >
                                <Link to="/supplier" onClick={() => setPath('供应商管理')}><Image src={mf} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>供应商主页</span></Link>
                            </Menu.Item>
                            <Menu.Item >
                                <Link to="/supplier/type" onClick={() => setPath('经营种类')}><Image src={zl} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>经营种类</span></Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/supplier/Addsupplier" onClick={() => setPath('新增供应商')}><Image src={jia} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>供应商新增</span></Link>
                            </Menu.Item>
                        </SubMenu>
                        <SubMenu title={shgl('商户管理', sh)}>
                            <Menu.Item>
                                <Link to="/merchant" onClick={() => setPath('商户管理')}><Image src={mf} width={18} style={{ paddingBottom: 5 }} />商户主页</Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="merchant/Addmerchant" onClick={() => setPath('新增商户')}><Image src={jia} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>新增商户</span></Link>
                            </Menu.Item>
                        </SubMenu>
                        <SubMenu title={hdgl('活动管理', hd)}>
                            <Menu.Item>
                                <Link to="/promote" onClick={() => setPath('活动管理')}><Image src={mf} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>活动主页</span></Link>
                            </Menu.Item>
                        </SubMenu>
                        <SubMenu title={glygl('管理员', gly)}>
                            <Menu.Item>
                                <Link to="/admin" onClick={() => setPath('管理员')}><Image src={mf} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>主页</span></Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/admin/action" onClick={() => setPath('操作日志')}><Image src={cz} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>操作日志</span></Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/admin/error" onClick={() => setPath('错误日志')}><Image src={cw} width={18} style={{ paddingBottom: 5 }} /><span style={{ paddingLeft: 5 }}>错误日志</span></Link>
                            </Menu.Item>
                        </SubMenu>
                    </Menu>
                </div>
                <div className="main-right">
                    <div className="main-title">
                        <div className="main-path">{path}</div>
                        <div className="main-Breadcrumb">
                            <Breadcrumb>
                                {breadcrumbItems.map((item) => (
                                    <Breadcrumb.Item key={item.key} >
                                        {/* <Link to={item.url}>{item.name}</Link> */}
                                    </Breadcrumb.Item>
                                ))}
                            </Breadcrumb>
                        </div>
                    </div>
                    <div className="main-right-content">
                        <Outlet></Outlet>
                    </div>
                </div>
            </div>
            <Spin spinning={spinning} tip="Loading" fullscreen />
        </div>
    )
};

export default Layout;